<template>
	<div class="bar">
		<div class="barbox dflex_c">
			<div class="iotfont"><v-countup start-value="0" :end-value="staData.member_cnt"></v-countup></div>
			<span class="line"></span>
			<div class="iotfont"><v-countup start-value="0" :end-value="staData.member_cnt_7"></v-countup></div>
			<span class="line"></span>
			<div class="iotfont"><v-countup start-value="0" :end-value="staData.member_cnt_yesterday"></v-countup></div>
			<span class="line"></span>
			<div class="iotfont"><v-countup start-value="0" :end-value="staData.member_cnt_today"></v-countup></div>
			<span class="line"></span>
			<div class="iotfont"><v-countup start-value="0" :end-value="staData.pay_cnt"></v-countup></div>
			<span class="line"></span>
			<div class="iotfont"><v-countup start-value="0" :end-value="staData.pay_money" :decimals="2"></v-countup></div>
		</div>
		<div class="barbox2 dflex">
			<div>总用户数</div>
			<div>近周新增</div>
			<div>昨日新增</div>
			<div>今日新增</div>
			<div>今日付款</div>
			<div>今日消费</div>
		</div>
	</div>
</template>

<script>
import vCountup from 'vue-countupjs';
export default {
	components: { vCountup },
	data() {
		return {
			staData: {
				member_cnt: 0,
				member_cnt_7: 0,
				member_cnt_yesterday: 0,
				member_cnt_today: 0,
				pay_cnt: 0,
				pay_money: 0
			}
		};
	},
	methods: {
		async getMember() {
			const res1 = this.$db['wmzmall-member']
				.collection()
				.groupBy('all')
				.groupField('count(*) as member_cnt')
				.get();

			const $ = this.$db.$cmd.aggregate;
			let today = new Date();
			today.setTime(today.getTime() - 24 * 60 * 60 * 1000 * 7);
			const res2 = this.$db['wmzmall-member']
				.collection()
				.where({
					create_time: $.gt(today.getTime())
				})
				.groupBy('all')
				.groupField('count(*) as member_cnt_7')
				.get();

			today = new Date();
			today.setTime(today.getTime() - 24 * 60 * 60 * 1000);
			const res3 = this.$db['wmzmall-member']
				.collection()
				.where({
					yy_mm_dd: today.format('yyyy年MM月dd日')
				})
				.groupBy('all')
				.groupField('count(*) as member_cnt_yesterday')
				.get();

			today = new Date();
			const res4 = this.$db['wmzmall-member']
				.collection()
				.where({
					yy_mm_dd: today.format('yyyy年MM月dd日')
				})
				.groupBy('all')
				.groupField('count(*) as member_cnt_today')
				.get();

			const res5 = this.$db['wmzmall-order']
				.collection()
				.where({
					yy_mm_dd: today.format('yyyy年MM月dd日'),
					order_pay_state: '已付款'
				})
				.groupBy('all')
				.groupField('count(*) as pay_cnt, sum(order_actural_paid) as pay_money')
				.get();

			const res = await Promise.all([res1, res2, res3, res4, res5]);

			this.staData = {
				...this.staData,
				...res[0].result.data[0],
				...res[1].result.data[0],
				...res[2].result.data[0],
				...res[3].result.data[0],
				...res[4].result.data[0]
			};

			this.staData.pay_money = this.staData.pay_money / 100;
		}
	},
	mounted() {
		this.getMember();
	},
	created() {
		uni.$on('biRefresh', () => {
			this.getMember();
		});
	}
};
</script>

<style>
.bar {
	background: #040633;
	padding: 0.15rem;
	margin-bottom: 0.1rem;
}

.barbox {
	height: 0.8rem;
}

.barbox div,
.barbox2 div {
	width: 50%;
	text-align: center;
	position: relative;
	z-index: 100;
}

.barbox:before,
.barbox:after {
	position: absolute;
	width: 0.3rem;
	height: 0.1rem;
	content: '';
}

.barbox:before {
	border-left: 2px solid #02a6b5;
	left: 0;
	top: 0;
	border-top: 2px solid #02a6b5;
}

.barbox:after {
	border-right: 2px solid #02a6b5;
	right: 0;
	bottom: 0;
	border-bottom: 2px solid #02a6b5;
}

.barbox .line {
	height: 30%;
	width: 1px;
	background: rgba(255, 255, 255, 0.2);
}

.barbox {
	border: 1px solid rgba(25, 186, 139, 0.17);
	position: relative;
}

.barbox .iotfont {
	font-size: 0.36rem;
	color: #ff6a6c;
	padding: 0.05rem 0;
	font-weight: bold;
}

.barbox2 div {
	font-size: 0.19rem;
	color: rgba(255, 255, 255, 0.7);
	margin-top: 0.1rem;
}
</style>
